<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>超酷背景动画 - sCoolBackgroundAnimation</title>
    <style type="text/css">
        html, body {
            margin: 0;
            padding: 0;
        }

        /* 只有absolute和fixed不会有滚动条 */
        #defaultCanvas0 {
            position: absolute;
            top: 0px;
            left: 0px;
            min-width: 100%;
            min-height: 100%;
            z-index: -1;
        }

    </style>
</head>
<body>

<div id="control_panel"
     style="background: rgba(250,250,250,0.75);border-radius: 0.33em;
     width: 250px;height: 350px;position: absolute;right: 10px;bottom: 10px;padding: 15px;">
    <div>
        <label>资源</label>
        <select id="sourceSelect" style="margin-left: 20px" onchange="onSourceSelect(this)">
            <option value="theMatrix">黑客帝国 theMatrix</option>
            <option value="PlayABall">玩个地球 PlayABall</option>
        </select>
    </div>
    <div>

    </div>
</div>

<script type="text/javascript">
    const defaultSource = 'theMatrix';

    // ball 特有属性
    const defaultBallImage = '2k_earth_clouds.jpg';
    const type = 'image';
    const mouseEvent = false;

    const config = {
        'theMatrix': {
            options: {
                // 背景色
                Background: '#000000',
                // 前景色
                Color: '#00ff00',
                Opacity: 150,
                // 字符 'Katakana', 'Braille','BoxDrawing','CJK Radicals Supplement','Kanbun','Yi Syllables'
                Unicode: 'Katakana',
                DropSpeed: 2,
                TextSpeed: 15,
                Size: 14,
                Direction: '↓',
                RotateAngle: 45,
                isPNG: false
            }
        },
        'PlayABall': {
            options: {
                Background: '#000000',
                Color1: '#000000',
                Color2: '#000000',
                Shape: 'Sphere',
                Pattern: 'Pattern1',
                Image_DataURL: getImagePath(defaultBallImage),
                Smooth: 60,
                Radius: 270,
                Radius2: 90,
                Speed: 0.1,
                RotateX: true,
                RotateY: true,
                RotateZ: true,
                SavePNG: false
            }
        }
    };

    let options;
    window.onload = function () {
        const source = getQueryString('source') || defaultSource;
        setSelected('sourceSelect', source);
        loadSource(source);
    };

    function onSourceSelect(option) {
        document.querySelector('canvas').remove();
        window.location.href = 'index.html?source=' + option.value;
    }

    function loadSource(source) {
        options = config[source].options;
        console.log(source)
        console.log(options)
        loadJavaScript("source/" + source + '/js/p5.min.js', 'p5.min.js');
        loadJavaScript("source/" + source + '/js/sketch.js', 'sketch.js');
    }

    function loadJavaScript(src, id) {
        const script = document.createElement('script');
        script.id = id;
        script.src = src;
        document.body.append(script);
    }

    function getImagePath(name) {
        return 'source/PlayABall/img/' + name;
    }

    function setSelected(selectId, checkValue) {
        const select = document.getElementById(selectId);
        for (let i = 0; i < select.options.length; i++) {
            if (select.options[i].value == checkValue) {
                select.options[i].selected = true;
                break;
            }
        }
    }

    function getQueryString(name) {
        const reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
        const r = window.location.search.substr(1).match(reg);
        if (r != null) {
            return unescape(r[2]);
        }
        return null;
    }
</script>
</body>
</html>
